    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正则之姓名验证</title>
        <style>
            .chinese{
                color: crimson;
                font-size: 40px;

            }
            .english{
                color: #2223dc;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
    <input type="text">
    <span>请输入！</span>
    <script>
        var rge=/^([\u4e00-\u9fa5]{1,4}|[a-zA-Z.\s]{1,20})$/;
        var inpt=document.getElementsByTagName('input')[0];
        var span=document.getElementsByTagName('span')[0];
        inpt.onblur=function () {
            console.log("111");
            if (rge.test(inpt.value)){
                span.innerHTML="您输入很对！";
                span.className="chinese";
                }else{
                span.innerHTML="您输入的是非法字符！";
                span.className="english";
            }
        }
    </script>
    </body>
    </html>